<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	  <style>
	    #box{
	      width: 400px;
	      height: 400px;
	      border: 1px solid #ccc;
	      background-color: #eee;
	      margin: 200px auto;
	      display: none;
	      text-align: center;
	      line-height: 400px;
	      font-size: 25px;
	      color: #ccc;
	    }
	  </style>
	  <div id="box">
	    请把文件拖拽在这~
	  </div>
	  <script type="text/javascript" src="js/jquery.js" ></script>
		<script>
		  
		  let time;
		  document.addEventListener("dragenter",function(e){
		    console.log("dragenter")
		  })
		  document.addEventListener("dragleave",function(e){
		    console.log("dragleave")//因为经过div也会出发drgleave会导致控制box会闪，所以控制在dragover里面做
		  })
		  document.addEventListener("dragover",function(e){
		    $("#box").show();
		    clearTimeout(time)
		    time = setTimeout(()=>{
		      $("#box").hide();
		    },300)
		    console.log("dragover")
		    e.preventDefault();
		  })
		  document.addEventListener("drop",function(e){
		    console.log("drop")
		    e.preventDefault();
		  })
		   box.addEventListener("dragenter",function(e){
		     box.innerHTML="请松手~"
      })
		   box.addEventListener("dragleave",function(e){
		     box.innerHTML="请把文件拖拽在这~"
      })
		   box.addEventListener("drop",function(e){
		     console.log(e.dataTransfer)
		     console.log(e.dataTransfer.files)
		     e.preventDefault();
      })
		  
		  
		</script>
	</body>
</html>
